<template>
  <div class="hidenx">
    <el-container style="position: absolute;">
      <el-header>
        <!-- <el-row>
          <el-col :span="15" :push="4" class="title">
            <h1>餐饮后台管理系统</h1>
          </el-col>
          <el-col :span="6" :push="2">
            <div class="nowNser">
              <el-row>
                <el-col :span="6" :push="14">
                  <i class="el-icon-user"></i>
                  {{getUserName}}
                </el-col>
                <el-col :span="3" :push="14">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="退出登录"
                    placement="bottom"
                  >
                    <el-button type="info" icon="el-icon-switch-button" circle @click="outLogin"></el-button>
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row> -->
        <user :header="msg"></user>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <!-- 根据身份显示导航 -->
          <xtnav></xtnav>
        </el-aside>
        <el-main>
          <!-- 视窗 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import xtnav from "../components/houtai/xtLeftNav";
import user from '../components/public/user'
export default {
  name: "hindex",
  components: {
    xtnav,
    user
  },
  data() {
    return {
      msg:'餐饮后台管理系统'
    }
  },
  // computed: {
  //   ...mapGetters(["getUserName"])
  // },
  // methods: {
  //   ...mapActions(["outLoginAct"]),
  //   outLogin() {
  //     this.outLoginAct();
  //     this.$router.push("/login");
  //   }
  // }
};
</script>

<style scoped lang="less">
.el-container {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    // text-align: center;
    line-height: 60px;
    // .title{
    //   text-align: center;
    // }
    // h1 {
    //   margin: 0;
    //   padding: 0;
    // }
    // el-row {
    //   height: 100%;
    // }
    // .nowNser {
    //   width: 100%;
    //   height: 60px;
    // }
  }

  .el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
  }
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
